<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>法老王の诅咒 - 古埃及探险</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- FontAwesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Noto+Serif+SC:wght@400;700&display=swap');
        
        body {
            font-family: 'Noto Serif SC', 'Cinzel', serif;
            background-color: #0f172a;
            color: #e2e8f0;
            height: 100vh;
            overflow: hidden;
            background-image: url('assets/bg.jpeg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }
        
        #game-container {
            position: relative;
            z-index: 1;
        }
        
        #game-container::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(15, 23, 42, 0.85);
            z-index: -1;
        }
        .hieroglyph {
            font-size: 1.5rem;
            letter-spacing: 0.5rem;
        }
        
        .scene-transition {
            transition: opacity 0.8s ease-in-out;
        }
        
        .btn-egypt {
            background: linear-gradient(135deg, #d4af37 0%, #f2d272 50%, #d4af37 100%);
            color: #422006;
            border: 2px solid #422006;
            text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.5);
            transition: all 0.3s ease;
        }
        
        .btn-egypt:hover {
            background: linear-gradient(135deg, #f2d272 0%, #d4af37 50%, #f2d272 100%);
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        }
        
        /* 场景图片样式 */
        #scene-image {
            position: relative;
            border-bottom: 3px solid #d4af37;
        }
        
        #scene-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.8s ease;
        }
        
        #scene-image img:hover {
            transform: scale(1.02);
        }
        
        #scene-image::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 20px;
            background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
        }
        
        .scene-title-overlay {
            position: absolute;
            bottom: 10px;
            left: 10px;
            padding: 5px 10px;
            background: rgba(0,0,0,0.7);
            border-left: 3px solid #d4af37;
            color: #d4af37;
            font-family: 'Cinzel', serif;
            z-index: 10;
        }
    </style>
</head>
<body>
    <!-- Loading Screen -->
    <div id="loading-screen" class="fixed inset-0 z-50 bg-slate-900 flex flex-col items-center justify-center transition-opacity duration-1000">
        <div class="relative w-full h-full">
            <img src="assets/bg.jpeg" alt="Loading Background" class="w-full h-full object-cover opacity-30">
            <div class="absolute inset-0 flex flex-col items-center justify-center bg-black bg-opacity-50">
                <h1 class="text-4xl md:text-6xl font-bold text-amber-300 mb-8">法老王の诅咒</h1>
                <div class="w-64 h-2 bg-slate-700 rounded-full overflow-hidden">
                    <div id="loading-bar" class="h-full w-0 bg-amber-400 transition-all duration-1000"></div>
                </div>
                <p id="loading-text" class="text-amber-200 mt-4 text-lg">正在加载游戏资源...</p>
            </div>
        </div>
    </div>

    <div id="game-container" class="container mx-auto px-4 h-full flex flex-col opacity-0 transition-opacity duration-1000">
        <!-- Header with game title -->
        <header class="py-4 text-center">
            <h1 class="text-3xl font-bold text-amber-300">法老王の诅咒</h1>
            <p class="text-amber-200 italic">古埃及探险</p>
        </header>
        
        <!-- Main game area -->
        <main class="flex-grow flex flex-col md:flex-row gap-6 relative">
            <!-- Scene display -->
            <div class="w-full md:w-2/3 bg-slate-800 rounded-lg overflow-hidden relative scene-container">
                <div id="scene-image" class="h-60 md:h-80 bg-slate-900 flex items-center justify-center overflow-hidden transition-all duration-700">
                    <img src="assets/bg.jpeg" alt="古埃及金字塔背景" class="w-full h-full object-cover">
                </div>
                
                <div class="p-4">
                    <h2 id="scene-title" class="text-xl font-bold text-amber-400 mb-2">入口石室</h2>
                    <p id="scene-description" class="text-gray-200 mb-4">你在一间布满象形文字的石室醒来，月光从头顶的裂缝透入。正中央的黄金石棺闪着微光，墙壁上残留着【↑→♀△】的神秘符号。左手边有具木乃伊，右手边壁画描绘着太阳船穿过十二道冥门。</p>
                    
                    <!-- Interactive elements container -->
                    <div id="interactive-elements" class="mb-4">
                        <!-- 第一关：符号排序谜题 -->
                        <div id="puzzle-container" class="bg-slate-700 p-3 rounded-md">
                            <p class="text-amber-300 mb-2"><i class="fas fa-puzzle-piece mr-1"></i> <span id="puzzle-text">石棺上有四个符号槽，需要按正确顺序排列</span></p>
                            
                            <div id="puzzle-input" class="flex gap-2 mb-4 justify-center">
                                <button class="puzzle-btn w-10 h-10 bg-slate-600 rounded-md flex items-center justify-center text-xl" data-symbol="♀">♀</button>
                                <button class="puzzle-btn w-10 h-10 bg-slate-600 rounded-md flex items-center justify-center text-xl" data-symbol="△">△</button>
                                <button class="puzzle-btn w-10 h-10 bg-slate-600 rounded-md flex items-center justify-center text-xl" data-symbol="↑">↑</button>
                                <button class="puzzle-btn w-10 h-10 bg-slate-600 rounded-md flex items-center justify-center text-xl" data-symbol="→">→</button>
                            </div>
                            
                            <div id="puzzle-solution" class="flex gap-2 justify-center mb-4">
                                <div class="solution-slot w-10 h-10 border-2 border-amber-500 rounded-md flex items-center justify-center text-xl"></div>
                                <div class="solution-slot w-10 h-10 border-2 border-amber-500 rounded-md flex items-center justify-center text-xl"></div>
                                <div class="solution-slot w-10 h-10 border-2 border-amber-500 rounded-md flex items-center justify-center text-xl"></div>
                                <div class="solution-slot w-10 h-10 border-2 border-amber-500 rounded-md flex items-center justify-center text-xl"></div>
                            </div>
                            
                            <div class="flex justify-center">
                                <button id="submit-puzzle" class="btn-egypt px-4 py-2 rounded-md font-bold">解开石棺</button>
                                <button id="reset-puzzle" class="ml-2 px-4 py-2 bg-slate-600 rounded-md hover:bg-slate-500">重置</button>
                            </div>
                        </div>
                        
                        <!-- 第二关：谜语选择题 -->
                        <div id="riddle-container" class="bg-slate-700 p-3 rounded-md hidden">
                            <p class="text-amber-300 mb-2"><i class="fas fa-question-circle mr-1"></i> <span id="riddle-text">当真实重于羽毛时，哪道门通向生路？</span></p>
                            
                            <div id="riddle-options" class="flex gap-4 justify-center mb-4">
                                <button class="riddle-option px-4 py-2 bg-slate-600 rounded-md hover:bg-slate-500" data-option="①">①阿努比斯天平</button>
                                <button class="riddle-option px-4 py-2 bg-slate-600 rounded-md hover:bg-slate-500" data-option="②">②荷鲁斯之眼</button>
                                <button class="riddle-option px-4 py-2 bg-slate-600 rounded-md hover:bg-slate-500" data-option="③">③圣甲虫图腾</button>
                            </div>
                            
                            <div id="hint-system" class="text-center">
                                <p id="hint-text" class="text-gray-300 italic mb-2 hidden"></p>
                                <button id="get-hint" class="text-amber-400 hover:text-amber-300"><i class="fas fa-lightbulb mr-1"></i>获取提示 (<span id="hints-remaining">2</span>次)</button>
                            </div>
                        </div>
                        
                        <!-- 第三关：机关谜题容器（动态生成） -->
                        <!-- 将由JavaScript动态创建 -->
                        
                        <!-- 第四关：最终谜题容器（动态生成） -->
                        <!-- 将由JavaScript动态创建 -->
                    </div>
                    
                    <div id="feedback-message" class="p-3 rounded-md mb-4 text-center hidden"></div>
                </div>
            </div>
            
            <!-- Inventory and game info -->
            <div class="w-full md:w-1/3 flex flex-col gap-4">
                <div class="bg-slate-800 rounded-lg p-4">
                    <h3 class="text-lg font-bold text-amber-400 mb-2 flex items-center">
                        <i class="fas fa-scroll mr-2"></i>游戏信息
                    </h3>
                    <div class="flex flex-col gap-2 text-sm">
                        <p><span class="text-gray-400">难度：</span>中等</p>
                        <p><span class="text-gray-400">预计时间：</span>45分钟</p>
                        <p id="current-scene" class="text-amber-300"><span class="text-gray-400">当前场景：</span>入口石室</p>
                    </div>
                </div>
                
                <div class="bg-slate-800 rounded-lg p-4 flex-grow">
                    <h3 class="text-lg font-bold text-amber-400 mb-2 flex items-center">
                        <i class="fas fa-briefcase mr-2"></i>收集物品
                    </h3>
                    <div id="inventory" class="grid grid-cols-2 gap-2">
                        <div class="inventory-slot h-16 border border-gray-600 rounded flex items-center justify-center bg-slate-700">
                            <span class="text-gray-500 text-xs">空</span>
                        </div>
                        <div class="inventory-slot h-16 border border-gray-600 rounded flex items-center justify-center bg-slate-700">
                            <span class="text-gray-500 text-xs">空</span>
                        </div>
                        <div class="inventory-slot h-16 border border-gray-600 rounded flex items-center justify-center bg-slate-700">
                            <span class="text-gray-500 text-xs">空</span>
                        </div>
                        <div class="inventory-slot h-16 border border-gray-600 rounded flex items-center justify-center bg-slate-700">
                            <span class="text-gray-500 text-xs">空</span>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        
        <!-- Footer -->
        <footer class="py-3 text-center text-gray-500 text-xs">
            <p>法老王の诅咒 &copy; 2023 - <span id="current-year">2025</span></p>
        </footer>
    </div>
    
    <script src="game.js"></script>
</body>
</html>